<template>
    <el-main>
        <div style="border-bottom: 1px solid rgb(204, 204, 204);">
            <h3>存放位置</h3>
            <h4 style="margin:15px 0">存放位置列表</h4>

        </div>
        <div style="margin-top: 15px">
            <el-button @click="add()" type="success" style="margin-left: 16px;">
                新增
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0" @click="deleteById" type="danger" round>删除
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0||this.multipleSelection.length>1"
                       @click="upd()"
                       type="primary" round>编辑
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0 " @click="start()" type="primary" round>启用
            </el-button>
            <el-button :disabled="this.multipleSelection.length===0" @click="stop()" type="primary" round>停用
            </el-button>
            <el-input placeholder="请输入存放位置" size="medium" v-model="locationName" class="input-with-select"
                      style="margin-left: 900px ;width: 400px;">
                <el-button slot="append" icon="el-icon-search" @click="selAllStorage"></el-button>
            </el-input>


        </div>
        <div>
            <!--  新增弹框  -->
            <el-drawer
                    :title="names"
                    :before-close="cancelForm"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form ref="form" :rules="rules" :model="form">
                        <el-form-item label="存放位置:" prop="location" style="margin-left: 80px">
                            <el-input size="medium" style="width: 300px" v-model="form.locationName"></el-input>
                        </el-form-item>
                        <el-form-item label="状态:" prop="location" style="margin-left: 100px">

                            <el-radio v-model="form.state" :label=1>启用</el-radio>
                            <el-radio v-model="form.state" :label=2>停用</el-radio>

                        </el-form-item>

                        <el-form-item label="备注:" prop="remark" style="margin-left: 105px">
                            <el-input style="width: 300px" type="textarea" v-model="form.comment"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="margin:50px 200px">
                        <el-button class="my-button" @click="cancelForm">取 消</el-button>
                        <el-button class="my-button" type="primary" @click="save(isEdit)" :loading="loading">
                            {{ loading ? '提交中 ...' : '确 定' }}
                        </el-button>
                    </div>
                </div>
            </el-drawer>

        </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号">
            </el-table-column>
            <el-table-column prop="locationName" label="存放位置">
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.state === 1 ? '开启' : '关闭' }}
                </template>
            </el-table-column>

            <el-table-column prop="comment" label="备注">
            </el-table-column>
            <el-table-column prop="creator" label="创建人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
        </el-table>
    </el-main>
</template>

<script>

import row from "element-ui/packages/row";

export default {

    name: "PlaceForStorage",
    data() {

        return {
            tableData: [],
            locationName: '',//模糊查存放位置名称
            multipleSelection: [],//多选框选择数据

            form: {//新增
                id: '',//id
                locationName: '',//存放位置
                state: 0,//状态
                comment: '',//备注
                creator: '张三',//操作人
            },
            names: '',
            rules: {//定义添加验证表单规则
                locationName: [
                    {required: true, message: '存放位置', trigger: 'blur'},
                    {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                ],
                state: [
                    {required: true, message: '请选择状态', trigger: 'blur'},
                ],

            },


            dialog: false, //抽屉弹窗开关
            loading: false,
            timer: null,//表单动画所需属性
            isEdit: true,//判断是新增还是修改，true是修改，false为新增

        }

    },
    methods: {

        //批量删除
        deleteById() {
            console.log(this.multipleSelection)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 定义一个空数组用于存储id
                var idArray = [];
                this.multipleSelection.forEach(obj => {
                    //将id存入数组
                    idArray.push(obj.id)
                })
                this.request.post("device/place-for-storage/deletePlaceById", idArray
                ).then(res => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        });
                        this.selAllStorage()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // //表单操作动画
        // handleClose(done) {
        //     if (this.loading) {
        //         return;
        //     }
        //     this.$confirm('确定要提交吗？')
        //         .then(_ => {
        //             this.loading = true;
        //             this.timer = setTimeout(() => {
        //                 done();
        //                 // 动画关闭需要一定的时间
        //                 setTimeout(() => {
        //                     this.loading = false;
        //                 }, 400);
        //             }, 2000);
        //         })
        //         .catch(_ => {
        //         });
        //
        // },
        //新增弹窗取消按钮
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },

        //模糊查存放位置列表
        selAllStorage() {
            console.log(this.locationName)
            this.request.get("device/place-for-storage/selAllStorage", {
                    params: {
                        locationName: this.locationName
                    }
                }
            ).then(res => {
                this.tableData = res.data

            })
        },
        //提交表单时判断是编辑还是新增
        save(val) {
            if (val) {
                //编辑
                this.updateStorage()
            } else {
                //新增
                this.insertStorage()
            }
            this.submitForm()
        },
        //重置表单
        submitForm() {
            this.form.locationName = ''
            this.form.comment = ''
            this.form.state = 0
        },

        //点击新增
        add() {
            this.dialog = true
            this.isEdit = false
            this.names = "新增"
        },
        //点击编辑
        upd() {
            this.dialog = true
            this.isEdit = true
            this.names = "编辑"
            this.mod()
        },
        //修改信息
        mod() {
            this.form.id = this.multipleSelection[0].id
            this.form.locationName = this.multipleSelection[0].locationName
            this.form.state = this.multipleSelection[0].state
            this.form.comment = this.multipleSelection[0].comment
            console.log(this.form.state)
        },
        //启动按钮
        start() {
            // 定义一个空数组用于存储id
            var idArray = [];
            this.multipleSelection.forEach(obj => {
                //将id存入数组
                idArray.push(obj.id)
            })
            this.request.post("device/place-for-storage/startUsing", idArray)
                .then(res => {
                    if (res.code === '200') {
                        this.startOpen2() // 启动成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.startOpen1()//启动失败通知
                    }
                })
        },
        //停用按钮
        stop() {
            // 定义一个空数组用于存储id
            var idArray = [];
            this.multipleSelection.forEach(obj => {
                //将id存入数组
                idArray.push(obj.id)
            })
            this.request.post("device/place-for-storage/outService", idArray)
                .then(res => {
                    if (res.code === '200') {
                        this.stopOpen2() // 停用成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.stopOpen1()//停用失败通知
                    }
                })
        },


        //编辑存放位置
        updateStorage() {
            this.request.post("/device/place-for-storage/updateStorage", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.xiugaiOpen1() // 编辑成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.xiugaiOpen4() // 编辑失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },

        //新增存放位置
        insertStorage() {
            this.request.post("/device/place-for-storage/insetStorage", this.form)
                .then(res => {
                    console.log(res)
                    if (res.code === '200') {
                        this.dialog = false // 关闭弹窗
                        this.tianjiaOpen1() // 添加成功通知
                        this.selAllStorage()//调用全查
                    } else {
                        this.tianjiaOpen4() // 添加失败通知
                        this.dialog = false // 关闭弹窗
                    }
                })
        },
        // 添加成功通知
        tianjiaOpen1() {
            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
            });
        },
        // 添加失败通知
        tianjiaOpen4() {
            this.$notify.error({
                title: '错误',
                message: '添加失败'
            })
        },
        // 编辑成功通知
        xiugaiOpen1() {
            this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success'
            });
        },
        // 启动失败通知
        startOpen1() {
            this.$notify.error({
                title: '错误',
                message: '启动失败'
            })
        },
        // 启动成功通知
        startOpen2() {
            this.$notify({
                title: '成功',
                message: '启动成功',
                type: 'success'
            });
        },
        // 停用失败通知
        stopOpen1() {
            this.$notify.error({
                title: '错误',
                message: '停用失败'
            })
        },
        // 停用成功通知
        stopOpen2() {
            this.$notify({
                title: '成功',
                message: '停用成功',
                type: 'success'
            });
        },
        // 添加失败通知
        xiugaiOpen4() {
            this.$notify.error({
                title: '错误',
                message: '编辑失败'
            })
        },

        //多选框监听选择数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }

    },
    //打开页面默认执行
    created() {
        this.selAllStorage()
    }
}
</script>

<style scoped>
.el-main {
    padding: 0;
}

.my-button {
    font-size: 16px;
    padding: 10px 20px;
}

</style>
